<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../../res/css/mz.css" />
        <script src="https://cdn.staticfile.org/layui/2.6.8/layui.min.js" ></script>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
        <script src="../../res/js/mz.view.js"></script>
        <script src="../../res/js/mz.common.js"></script>
        <style>
            .title{text-align: center; margin: 20px auto;}
            .title span{color: #777777; margin: 10px 20px;}
            .intro{background: #f3f3f3; width: 600px; margin: 10px auto; padding: 10px; border-radius: 5px;}
        </style>
    </head>
    <body>

        <div id="app" style=" margin: 10px; display: none;">

            <div class="title">
                <h3>{{article.title}}</h3>
                <div style="margin-top: 20px;">
                    <span>作者：{{article.author}}</span>
                    <span>发布时间：{{article.publish_time}}</span>
                    <span><a :href="'/doc/toWord/' + article.id" target="_blank">下载Word</a></span>
                </div>

            </div>

            <div class="intro">
                <p style="text-indent: 2em;">
                    {{article.introduction}}
                </p>
            </div>

            <div class="content" v-html="article.content">
            </div>

        </div>


        <script>

            //加载模块
            layui.use(['jquery'], function(){
                layui.$.get(base_url + '/article_one_query/' + getQueryString('id'), function(res){
                    initVue({data: { article :  res.content || {}  }});
                })
            });

        </script>

    </body>
</html>
